<template>
  <div id="father">
    <div id="tit">
      <i style="color: #009688" class="el-icon-s-order"></i> <b> &nbsp; 订单管理</b>
    </div>
    <div id="found_box">
      <div class="text1">订单状态:</div>
      <div class="select1">
        <select id="status" class="sel">
          <option value="all">-全部-</option>
          <option value="0">未付款</option>
          <option value="1">已付款</option>
          <option value="2">异常</option>
        </select>
      </div>

      <div class="text1">订单价格:</div>
      <div class="select1">
        <input type="text" id="price" class="inp"/>
      </div>
      <div class="text3">订单成交时间:</div>
      <div class="select1">
       <input type="text" id="startTime" placeholder="开始时间" class="inp"/>
      </div>
      <div class="select1">
        <input type="text" id="endTime" placeholder="结束时间" class="inp"/>
      </div>
      <input type="button" value="查询" id="found_button" @click="show()"/>
    </div>



    <table id="tabl">
      <thead>
      <tr>
        <th>订单状态</th>
        <th>下单时间</th>
        <th>订单价格</th>
        <th>出租小时</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody id="tb">
      </tbody>
      <tfoot id="tf1">
      <!--      <tr>-->
      <!--        <td colspan="8" id="tf">-->
      <!--           <input type="button" value="1" class="pagcli"/>-->
      <!--          <input type="button" value="2" class="pag"/>-->
      <!--          <input type="button" value="3" class="pag"/>-->
      <!--        </td>-->
      <!--      </tr>-->
      </tfoot>
    </table>
    <div class="modal" id="modal-order" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-header" style="text-align: center">
          <h2 style="color: brown">订单详情</h2>
          <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
        </div>
        <div class="modal-body">
          车位地址:<br/><span id="mo_address" style="color: #009688;float: right"></span><br/>
          车位价格(每小时):<br/><span id="mo_price" style="color: #009688;float: right"></span><br/>
          成交时间:<br/><span id="mo_time" style="color: #009688;float: right"></span><br/>
          所属物业:<br/><span id="mo_wy" style="color: #009688;float: right"></span><br/>
          <input type="hidden" id="carId"/>
          <input type="hidden" id="stats"/>
        </div>
        <div class="modal-footer">
          <a href="/#1-2" class="btn">返回</a>
        </div>
      </div>
    </div>
    <div class="modal" id="modal-pingjia" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-header" style="text-align: center">
          <h2 style="color: brown">订单评价</h2>
          <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
        </div>
        <div class="modal-body2">
          <table class="tabl">
            <thead>
            <tr>
              <th>地址</th>
              <th>评价者</th>
              <th>评价内容</th>
              <th>总评价</th>
            </tr>
            </thead>
            <tbody id="tb2">

            </tbody>
            <tfoot>

            </tfoot>
          </table>
        </div>
        <div class="modal-footer">
          <a href="/#1-2" class="btn">返回</a>
        </div>
      </div>
    </div>

    <div class="modal" id="modal-tousu" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-header" style="text-align: center">
          <h2 style="color: brown">订单投诉</h2>
          <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
        </div>
        <div class="modal-body2">
          用户名称：<span id="mo2_uname" style="color: #009688;float: right"></span><br/>
          车位地址：<span id="mo2_parking_address" style="color: #009688;float: right"></span><br/>
          投诉对象<span id="mo2_target" style="color: #009688;float: right">物业</span><br/>
          投诉原因：<input type="text" id="mo2_reason"/><br/>
          <div id="tijiao"></div>
        </div>
        <div class="modal-footer">
          <a href="/#1-2" class="btn">返回</a>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "Order_Information",
  data() {
    return {
      curr : null,
      inf:{
        parkingId: null,
        parkingStatus: null,
        parkingAddress: null,
        parkingUid: null,
        carUid: null,
        parkingRegistrationTime:null,
        parkingProportion: null,
        licensePlateNumberEntering: null,
        parkingRent:null,
        longitude: null,
        latitude: null,
        propertyId: null,
        parkingPicture: null,
        name:null
      }
    }
  },
  created() {
    let _this=this;
    window.details=_this.details;
    window.pingjia=_this.pingjia;
    window.tousu=_this.tousu;
    window.findtou=_this.findtou;
    window.ye = _this.ye;
    window.tou = _this.tou;
    },
  mounted() {
  this.show()
    },
  methods: {
    findtou(i){
      this.sa.ajax("/e-order/complain/findByOrderId/"+i, {},
          function (resp){
            $("#mo2_reason").val("");
            if(resp.data==0){
              this.tousu();
            }else{
              window.location.href="#modal-tousu";
              $("#mo2_uname").html(resp.data[0].uname);
              $("#mo2_parking_address").html(resp.data[0].parkingAddress);
              $("#mo2_reason").val(resp.data[0].describe);
              $("#tijiao").html("");
            }
          }.bind(this),
          {type: 'get'})
    },

    tou(){
      var reason = $("#mo2_reason").val();
      var orderid =    this.inf.parkingUid;
      var parkingAddress = this.inf.parkingAddress;
      var target = 1;
      var uid =  this.inf.parkingUid;
      var uname =this.inf.name;
      var i = localStorage.getItem("token");
      var state = 0;
      this.sa.ajax("/e-order/complain/insertComplain/"+i,{
        uid : uid,
        reason : reason,
        orderid : orderid,
        parkingAddress : parkingAddress,
        target : target,
        uname : uname,
        state :state
      },
          function (resp){
        if(resp.data==true){
          window.location.href = "#2-7"
          this.sa.ok("投诉完成");
        }else {
          this.sa.error("投诉失败");
        }

          }.bind(this),
          {type: 'POST'})
      },
    tousu(id){
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-owner/parking-information/findAllIn",{
            token : i,
            parkingId :id,
          },
          function(resp){
            var rec = resp.data.chewei.records[0];
            this.inf.parkingUid = rec.parkingUid;

            for(var i in resp.data.yonghu){
              var yh = resp.data.yonghu[i];
              if(yh.uid == rec.parkingUid){
                this.inf.name =yh.uname;
                break;
              }
            }
            this.inf.parkingId= id
            this.inf.parkingAddress = rec.parkingAddress;

            var html="<input type='button' value='提交' onclick='tou()' style='height: 10%;width: 60%;background-color: #CA4242;color: white ;margin-left: 20%;margin-top: 20%'/>"
            $("#tijiao").html(html);
            window.location.href="#modal-tousu";
            $("#mo2_uname").html(this.inf.name);
            $("#mo2_parking_address").html(this.inf.parkingAddress);

          }.bind(this),
          {type: 'get'})
    },

    details(id){
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-owner/parking-information/findAllIn",{
            token : i,
            parkingId :id,
          },
          function (resp){
            window.location.href="#modal-order"

              var re = resp.data.chewei.records[0];


           $("#mo_address").html(re.parkingAddress);
           $("#mo_price").html(re.parkingRent);
           $("#mo_time").html(re.parkingRegistrationTime);
           for (var i in resp.data.wuye){
             var wy = resp.data.wuye[i];
             if(re.propertyId==wy.propertyId) {
               $("#mo_wy").html(wy.propertyName);
               break;
             }
           }

          }.bind(this),
          {type: 'get'})
    },
    pingjia(id){
      this.sa.ajax("/e-order/appraise/findByOrderId/"+id,{},
          function(resp){
            if(resp.data==0){
              this.sa.ok("没有评价")
            }else{
              window.location.href="#modal-pingjia";
              var html = ""
              for(var i in resp.data){
                var dt = resp.data[i];
                html+="<tr><td>"+dt.parkingAddress+"</td>" +
                    "<td>匿名</td>" +
                    "<td>"+dt.describe+"</td>"
                switch (dt.evaluate){
                  case 0 :
                   html+= "<td>好评</td>"
                        break;
                  case 1 :
                    html+="<td>中评</td>"
                    break;
                  case 2 :
                    html+="<td>差评</td>"
                }

                  html+="</tr>"
              }
              $("#tb2").html(html);
            }
          }.bind(this),
          {type: 'get'})
    },

    show(curr) {
     var status = $("#status").val();
     var price = $("#price").val();
      if(status=="all"){
         status=null
      }
      if(price=="all"){
        price=null
      }
      var i = localStorage.getItem("token");
      var startTime = $("#startTime").val();
      if(startTime==""){
        startTime=undefined
      }
      var endTime = $("#endTime").val();
      if(endTime==""){
        endTime=undefined
      }
      this.sa.ajax("/e-order/order/findAllOrder" , {
            token : i,
            current: curr,
            size: 10,
            start: startTime,
            end: endTime,
            status: status,
            price :price
          },
          function (resp) {
            var html = "<tr>";
            for (var i in resp.data.records) {

              var re = resp.data.records[i];

              switch (re.status) {
                case 0:
                  html += "<td>未付款</td>"
                  break;
                case 1:
                  html += "<td>已付款</td>"
                  break;
                case 2:
                  html += "<td>异常</td>"
                  break;
              }
              var time = (re.creatTime).split("T");
              var time2 =time[1].split(".");

              html +=
                  "<td>" + time[0]+" "+time2[0] + "</td>" +
                  "<td>" + re.price + "</td>" +
                  "<td>" + re.time + "</td>"

              // (0:未付款,1:已付款,2:异常)
              html += "<td><input style='float:left; color: white;width:30%;height: 60%;font-size: 115%;background-color:#009688;' type='button' value='详情' onclick='details(" +re.parkingId+")'/>"
              html += "<input style='float:left;color: white;width:30%;height: 60%;font-size: 115%;background-color:#357ebd;' type='button' value='评价' onclick='pingjia(" +re.orderid+ ")'/>"
              html += "<input style='float:left;color: white;width:30%;height: 60%;font-size: 115%;background-color:darkred;' type='button' value='投诉' onclick='findtou(" +re.orderid + ")'/></td></tr>"

            }
            $("#tb").html(html);
            var html2 = "<tr><td colspan='5'>";
            for (let j = 0; j < resp.data.pages; j++) {
              if (j == resp.data.current - 1) {
                html2 += "<input type='button' value='" + (j + 1) + "' style='  background-color: #009688;\n" +
                    "  width: 5%;\n" +
                    "  height: 90%;\n" +
                    "  color: white;\n" +
                    "  border: 1px solid #009688;\n" +
                    "  margin-right: 0.3%;\n" +
                    "  margin-left: 0.3%;\n" +
                    "  margin-top: 0.3%;\n" +
                    "  margin-bottom: 0.3%;\n" +
                    "  font-size: 115%;'/>"
                this.curr = resp.data.current;
              } else {
                html2 += "<input type='button' value='" + (j + 1) + "' onclick='ye(" + (j + 1) + ")' style='background-color: #EEEEEE;\n" +
                    "  width: 5%;\n" +
                    "  height: 90%;\n" +
                    "  border: 1px solid #009688;\n" +
                    "  margin-right: 0.3%;\n" +
                    "  margin-left: 0.3%;\n" +
                    "  font-size: 115%;'/>"
              }
            }
            html2 += "</td></tr>"
            $("#tf1").html(html2);

          }.bind(this),
          {type: 'get'})
    },
    ye(i){
      this.show(i)
    }
  }
}
</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#tit{
  width:40%;
  margin-left: 30%;
  margin-top: 2%;
  height: 5%;
  text-align: center;
  font-size: 170%;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
}
#found_box{
  padding-top: 1%;
  width: 80%;
  margin-top: 1.5%;
  margin-left: 10%;
  background-color: gray;
  height: 6%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border: 1px solid black;
}
.text1{
  width: 10%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.text2{
  width: 17%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.text3{
  margin-left: 5%;
  width: 14%;
  font-size: 120%;
  height: 100%;
  color: black;
  float: left;
}
.select1{
  width: 8%;
  font-size: 110%;
  height: 100%;
  float: left;
}
#found_button{
  float: right;
  margin-right: 3%;
  width: 12%;
  height: 70%;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 15px;
  border: 1px solid black;
  background-color: #009688;
  color: black;
}
.sel{
  border-bottom-right-radius: 10px;
  border-top-left-radius: 10px;
  border: #009688 1px solid;
  height: 70%;
  float: left;
}
#found_button:hover{
  color: white;
  border: 1px solid black;
}

option{
  width: 100px;
}
#tabl{
  margin-top: 1.5%;
  margin-left: 10%;
  width: 80%;
  border: 1px solid black;
  text-align: center;
}
.tabl{
  margin-top: 1.5%;
  width: 100%;
  border: 1px solid black;
  text-align: center;
}

/*th{*/
/*  border-bottom: 1px black solid;*/
/*  width: 10%;*/
/*  font-size: 115%;*/
/*}*/
table {
  border-spacing: 0;/*去掉单元格间隙*/
}
tfoot{
  height: 100px;
}
.pag{
  background-color: #EEEEEE;
  width: 5%;
  height: 90%;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  font-size: 115%;
}
.pagcli{
  background-color: #009688;
  width: 5%;
  height: 90%;
  color: white;
  border: 1px solid #009688;
  margin-right: 0.3%;
  margin-left: 0.3%;
  margin-top: 0.3%;
  margin-bottom: 0.3%;
  font-size: 115%;
}
.shelf{
  width: 80%;
  height: 80%;
  color: white;
  font-size: 115%;
}

.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  height: 270px;
  padding-top: 5%;
  padding-left: 24%;
  padding-right: 24%;
  font-size: 120%;
}
.modal-body2 {
  height: 270px;
  padding-top: 5%;
  padding-left: 3%;
  padding-right: 3%;
  font-size: 120%;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
.bigButtons1{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: left;
  background-color: gray;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid  gray;
}
.bigButtons1:hover{
  border: 5px solid  #de9830;

}
.bigButtons2{
  padding-left: 15%;
  padding-top: 18%;
  height: 58%;
  width: 30%;
  color: white;
  float: right;
  background-color: #de9830;
  font-size: 140%;
  border-radius: 8px;
  border: 5px solid #de9830;
}
.bigButtons2:hover{
  border: 5px solid gray;
}
.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.sel2{
  margin-top: 1.5%;
  border: #009688 1px solid;
  font-size: 85%;
}
#butt1{
  margin-top: 15%;
  width: 50%;
  margin-left: 25%;
  background-color: #009688;
  font-size: 120%;
  border: #009688 1px solid;
  color: white;
}
#endTime{
  margin-left:5%;
}
.inp{
  border: 1px solid #009688;
  width: 100%;
  height: 70%;
}
</style>